@import "PersonalHeaderReverse.scss";
@import "../../../both/mixin";

$namespace: mooc;
$font-color: #ececec;
$font-size: 18px;
$header-height : 79px;
$header-font-color : #B2B5BB;

header {
  position: relative;
  width: 100%;
  //text-align: center;
  background: #2E323E repeat 0 0 none;
  z-index: 999;
  > nav {
    position: relative;
    height: $header-height;
    margin: 0 auto;
    overflow: inherit;
    // nav
    &.mooc-nav {
      width: 1220px;
      color: $font-color;

      // component
      .#{$namespace}-header-component {
        display: inline;
        float: left;
        height: 100%;
        box-sizing: border-box;

        // in right
        &.#{$namespace}-login {
          float: right !important;

          &:before{
            display: inline-block;
            content : "";
            height : 100%;
            vertical-align: middle;
          }

          // right component
          .#{$namespace}-right {
            position: relative;
            font-size: $font-size - 2px;
            color : $header-font-color;
            display: inline-block;

            a{
              text-decoration: none;
            }

            &.#{$namespace}-login-event {
              height : 36px;
              line-height: 36px;
              margin-left : 15px;

              a.user_action{
                text-decoration: none;
                color : #CCCCCC;
                margin-left : 10px;
              }
            }

            // search component
            &.#{$namespace}-search {
              position: relative;
              margin: 0 0.5em;
              //height: 100%;
              form {
                position: inherit;
                display: block;
                box-sizing: border-box;
              }
              i.fa.fa-search{
                cursor: pointer;
              }

              input[type=text] {
                position: inherit;
                padding: 0.2em 2.1em 0.2em 0.4em;
                height: 24px;
                border: 0 solid transparent;
                border-radius: 3px;
                font-size: 16px;
              }
              input[type=text]:focus{
                text-decoration: none;
                outline: none;
              }

              // icon
              .#{$namespace}-search-icon {
                position: absolute;
                color: #aaaaaa;
                top: 0.2em;
                right: 0.4em;
              }
            }

            .#{$namespace}-avatar{
              width : 35px;
              height : 35px;
              border-radius: 50%;
              vertical-align: middle;
              margin-left : 10px;
              position: relative;
              cursor: pointer;

              &:hover{
                border : 2px solid #f01414;
              }
            }

            .#{$namespace}-welcome {
              position: relative;
              display: inline-block;
              height : 30px;
              line-height:30px;
              margin-left : 15px;
              color : #787D82;
            }

            .p_card_cr{
              visibility: hidden;
            }

            .#{$namespace}-avatar:hover + .p_card_cr, .p_card_cr:hover{
              visibility: visible;
            }
          }
        }

        &.#{$namespace}-logo-component {

          &:before{
            display: inline-block;
            height : 100%;
            vertical-align: middle;
            content : "";
          }

          > a.href_cr {
            display: inline-block;
            cursor: pointer;
            text-decoration : none;

            span {
              font-style: italic;
              font-size : 30px;
              font-weight: bold;
              vertical-align: middle;
              color: $font-color;
            }
          }
        }

        // logo
        .#{$namespace}-logo {
          vertical-align: middle;
          display: inline-block;
          position: relative;
          background-size: auto 100%;
          background-image: url("../../../../../img/eda_logo.png");
          background-position: 0 0;
          width: 36px;
          height: 36px;
        }

        // list
        ul.#{$namespace}-header-list {
          height : 100%;
          margin-left : 20px;
          margin-top : 0px;
          margin-bottom: 0px;
          list-style: none;

          li {
            height : 100%;
            line-height : $header-height;
            float: left;
            padding : 0px 20px;
            font-size: $font-size;

            a{
              text-decoration: none;
              color : $header-font-color;
            }

            a:visited{
              color : $header-font-color;
              text-decoration: none;
            }

            a:hover{
              color : #CCCCCC;
            }


            // mobile application
            &.#{$namespace}-mobile-application {
              i.fa::before {
                margin-right: 4px;
              }
              i {
                font-size : 24px;
                vertical-align: text-top;
              }
              span{
              }
            }
            a {
              text-decoration: none;
              color : $header-font-color;
            }
          }
          //li + li {
          //  margin-left: 10px;
          //}
        }
      }
    }
  }
}

.popup_cr.bln {
  $login_pop_up_width: 450px;
  $login_panel_background_color : #FFFFFF;
  $login_panel_header_height : 50px;

  .popup_panel{
    position: fixed ;
    top : 20% ;
    width: $login_pop_up_width;
    transform: translate(-($login_pop_up_width / 2),0);
  }

  .login_header{
    height : $login_panel_header_height;
    line-height : $login_panel_header_height;
    background-color: $login_panel_background_color;
    border-bottom: 1px solid #D9D9D9;

    .left {
      float : left;
      height : $login_panel_header_height;
    }

    .logo{
      background-image: url("../../../../../img/eda_logo.png");
      background-size : auto 100%;
      height : 36px;
      width : 36px;
      background-position: 0 0;
      display: inline-block;
      margin-left : 20px;
      vertical-align: middle;
    }

    span{
      vertical-align: middle;
      display: inline-block;
    }

    .logo_name{
      font-size : 20px;
      font-weight: 700;
      margin-left : 10px;
      color : #2F2F2F;
    }

    .login_hint{
      margin-left : 10px;
      color : #575757;
      font-size : 16px;
      height : 16px;
      border-left : 1px solid #BBBBBB;
      line-height : 16px;
    }

    .right {
      float : right;
      height : $login_panel_header_height;
      line-height : $login_panel_header_height;

      div{
        display: inline-block;
      }

      .register_hint{
        color : #575757;
        font-size : 14px;
      }

      .register_btn{
        color : white;
        background-color : #F73736;
        font-size : 14px;
        font-weight : 500;
        height : 32px;
        line-height : 30px;
        padding : 0px 15px;
        margin-left : 10px;
        border-radius: 2px;
        cursor: pointer;
      }

      i.fa.fa-close{
        margin-left : 15px;
        margin-right : 10px;
        font-size : 18px;
        cursor: pointer;
      }

    }

  }

  $body_width : 300px;
  $body_height: 260px;
  $input_width : 350px;
  .panel_body{
    background-color : $login_panel_background_color;

    form.login_form{
      margin : 0 auto;
      height : $body_height;
      padding : 50px 0;

      .input_wr{
        position: relative;
        width : $input_width;
        height : 46px;
        margin: 0 auto 15px auto;

        i{
          z-index : 101;
          position: absolute;
          left : 15px;
          top : 14px;
          color : #B8B8B8;
          font-size : 18px;
        }

        input[type="text"],input[type="text"]:focus,
        input[type="password"],input[type="password"]:focus{
          z-index : 101;
          border : 0;
          outline: none;
          left : 46px;
          top : 3px;
          position: relative;
          height : 40px;
          line-height : 40px;
          font-size : 15px;
          width : $input_width - 50px;
          ::-moz-placeholder { color: #DDD6D4; }
          ::-webkit-input-placeholder { color:#DDD6D4; }
          :-ms-input-placeholder { color:#DDD6D4; }
        }

        .input_border{
          z-index : 100;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border : 1px solid #c2c2c2;
          border-radius : 2px;
          background-color : #FFFFFF;
          transition: all 0.2s;
        }

        input[type="text"]:focus + .input_border,
        input[type="password"]:focus + .input_border{
          box-shadow: 2px 2px 2px #c2c2c2;
          border: 2px solid #c2c2c2;
        }

      }

    }

    @include cf("div.login_btn");
    div.login_btn{
      background-color : #E9241C;
      color : white;
      font-size : 16px;
      margin : 25px auto 0;
      height : 40px;
      line-height : 40px;
      cursor: pointer;
      border-radius: 2px;
      width : $input_width;
      text-align: center;
    }
  }
}